<template>
  <div class="el-dropdown-link">
    <el-dropdown>
      <span class="el-dropdown-link">
          {{Text}}
           <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>
            <span @click="chan">中文</span>
          </el-dropdown-item>
          <el-dropdown-item>
            <span @click="engl">english</span>
          </el-dropdown-item>
        </el-dropdown-menu>
        <!-- :disabled="languages === item.value" -->
      </template>
    </el-dropdown>
  </div>
</template>
<script>
// import { defineComponent, reactive, toRefs, computed } from 'vue'
// import { useI18n } from 'vue-i18n'
// import $store from '../../store/index'
// import { ElMessage } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'
export default {
  components:{
ArrowDown
  },
  data(){
    return{
      Text:"中文",
     chinese:"",
     english:"",
    }
  },
  methods:{
    chan(){
      // console.log(localStorage.getItem('zh',"语言切换"));
     this.lang = 'zh';
          this.$i18n.locale = this.lang;//关键语句
    //     console.log(this.$i18n.locale,"语言切换");
      this.Text = "中文"
    },
    engl(){
       this.lang = 'en';
          this.$i18n.locale = 'en';//关键语句
      this.Text = "english"
    },
  }

}
</script>
<style lang="less" scoped>
.el-dropdown-link {
  margin: 0 20px;
  margin-top: 5px;
}
</style>